const checkedStateEles = document.querySelectorAll('.checkedState')
const checkedAllEle = document.querySelector('.checkedAll')

// 给金额赋值
const priceEles = document.querySelectorAll('.price')
for (let i = 0; i < priceEles.length; i++) {
  priceEles[i].innerText = 0
}

function inputChangeHandler() {
  checkedStateEles.forEach((checkedStateEle) => {
    checkedStateEle.addEventListener('change', function () {
      if (checkedStateEle.checked) {
        const priceEles = document.querySelectorAll('.price')
        priceAllEle.innerText = getSum(priceEles)
      }
    })
  })
}

inputChangeHandler()

// 给总金额赋值
let priceAllEle = document.querySelector('.priceAll')
priceAllEle.innerText = 0
priceAllEle.innerText = getSum(priceEles)

// 建立计算总价的函数
function getSum(priceEles) {
  let sum = 0
  priceEles.forEach((priceEle) => {
    sum += parseInt(priceEle.innerText)
  })
  return sum
}

// 点击全选，下面两个复选框都被选中
checkedAllEle.addEventListener('click', function () {
  checkedStateEles.forEach((checkedStateEle) => {
    checkedStateEle.checked = checkedAllEle.checked
  })
  priceAllEle.innerText = getSum(priceEles)
  getNumberAll()
})

checkedStateEles.forEach((checkedStateEle) => {
  checkedStateEle.addEventListener('change', function () {
    checkedAllEle.checked = [...checkedStateEles].every(
      (item) => item.checked === true
    )
  })
})

// 计算总价
function setTotalPrice(totalPrice) {
  priceAllEle.innerText = totalPrice
}

const addELes = document.querySelectorAll('.add')
const reduceEles = document.querySelectorAll('.reduce')
const numberEles = document.querySelectorAll('.number')
let count = 0

// 给商品个数赋值
for (let i = 0; i < numberEles.length; i++) {
  numberEles[i].innerText = count
}

// 将单击事件委托给ul
const listEle = document.querySelector('.list')

listEle.addEventListener('click', function (event) {
  // 点击加号减号，进行数字的加减
  // 给加号绑定
  if (event.target.className === 'add') {
    count++
    event.target.nextElementSibling.innerText = count
    const onlyPrice = parseInt(
      event.target.parentElement.nextElementSibling.children[0].innerText
    )
    const priceEle =
      event.target.parentElement.nextElementSibling.nextElementSibling
        .children[0]
    const price = count * onlyPrice
    priceEle.innerText = price
  }
  // 给减号绑定
  if (event.target.className === 'reduce') {
    if (count > 0) {
      count--
      event.target.previousElementSibling.innerText = count
      const onlyPrice = parseInt(
        event.target.parentElement.nextElementSibling.children[0].innerText
      )
      const priceEle =
        event.target.parentElement.nextElementSibling.nextElementSibling
          .children[0]
      const price = count * onlyPrice
      priceEle.innerText = price
    }
  }

  //   点击删除，删除当前商品
  if (event.target.className === 'del') {
    event.target.parentElement.remove()
    numberAllEle.innerText = listEle.children.length
    const priceEles = document.querySelectorAll('.price')
    priceAllEle.innerText = getSum(priceEles)
  }
  // console.log('~~~~~:', getSum(priceEles))
  setTotalPrice(getSum(priceEles))
}) //不能删

// 点击删除选中的商品
const delCheckedEle = document.querySelector('.delChecked')
delCheckedEle.addEventListener('click', function () {
  checkedStateEles.forEach((checkedStateEle) => {
    if (checkedStateEle.checked) {
      checkedStateEle.parentElement.parentElement.remove()

      numberAllEle.innerText = listEle.children.length

      const priceEles = document.querySelectorAll('.price')
      priceAllEle.innerText = getSum(priceEles)
    }
  })
})

// 计算商品个数：
// 想法：先计算ul的子元素的长度，在这个数据中计算复选框的值为true的个数
let numberAllEle = document.querySelector('.numberAll')
numberAllEle.innerText = 0

function getNumberAll() {
  let checkedArr = []
  checkedStateEles.forEach((n) => {
    checkedArr.push(n)
  })
  const checkedCount = checkedArr.filter((n) => n.checked === true).length
  numberAllEle.innerText = checkedCount
}

checkedStateEles.forEach((checkedStateEle) => {
  checkedStateEle.addEventListener('change', getNumberAll)
})

getNumberAll()
